import { Tab } from '@headlessui/react'
import classNames from 'classnames'
import styles from './MultiSwitcher.module.scss'

interface MultiSwitcherProps {
  items: string[]
  onClick: (index: number) => void
  selectedIndex: number
}

export const MultiSwitcher = ({ items, onClick, selectedIndex }: MultiSwitcherProps) => {
  return (
    <Tab.Group selectedIndex={selectedIndex}>
      <Tab.List className={styles.button}>
        {items.map((item, index) => (
          <Tab
            className={({ selected }) =>
              classNames(styles.tab, selected ? styles.active : styles.tab)
            }
            key={index}
            onClick={() => onClick(index)}
          >
            {item}
          </Tab>
        ))}
      </Tab.List>
    </Tab.Group>
  )
}
